<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone = no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>职位详情</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,
        body {
            font-size: 14px;
            height: 100%;
            background-color: #f2f2f2;
        }

        header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 75px;
            text-align: left;
            background-color: #fff;
            border-bottom: 1px solid #f2f2f2;
        }

        header .back {
            display: flex;
            justify-content: space-between;
            margin-top: 38px;
            width: 100%;
            height: 1.5rem;
        }

        .back img {
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
        }

        .back img:nth-child(1) {
            margin-left: 1rem;
        }

        .back img:nth-child(2) {
            margin-right: 1rem;
        }

        main {
            padding-top: 75px;
            padding-bottom: 56px;
        }

        main .job {
            background-color: #fff;
            padding: 1rem;
        }

        .jobName {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .salary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .salary span:nth-child(1) {
            color: orange;
            font-weight: bold;
            font-size: 1.2rem;
        }

        .salary span:nth-child(2) {
            font-size: 0.9rem;
            color: #666;
        }

        .address {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #555;
            padding: 1rem 0;
            border-top: 1px solid #f2f2f2;
            border-bottom: 1px solid #f2f2f2;
        }

        .address div {
            width: 90%;
            height: 19px;
        }

        .address .address-icon {
            display: inline-block;
            width: 19px;
            height: 19px;
        }

        .address img {
            width: 16px;
            height: 16px;
        }

        .address span {
            display: inline-block;
            width: 85%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .jobinfo .jobinfo-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin: 1rem 0;
        }

        .jobinfo .jobinfo-content {
            color: #555;
            line-height: 1.5;
        }

        .jobinfo .contact {
            margin-top: 0.5rem;
        }

        .contact span:nth-child(4) {
            visibility: hidden;
            background-color: #FBB40E;
            padding: 0.3rem;
            box-sizing: border-box;
            color: #fff;
            border-radius: 0.35rem;
        }

        .contact img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }

        .warning {
            display: flex;
            justify-content: flex-start;
            margin: 1rem 0;
            padding: 1rem;
            color: orange;
            background-color: #fff;
        }

        .warning img {
            width: 2rem;
            height: 2rem;
            margin-right: 1rem;
        }

        footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 4rem;
            line-height: 4rem;
            text-align: center;
            background-color: #FBB40E;
            z-index: 999;
        }
    </style>
</head>

<body>
    <header>
        <div class="back">
            <img src="../image/icon/back.png" alt="" onclick="api.closeWin()">
            <img src="../image/icon/collect.png" id="collect" alt="">
        </div>
    </header>
    <main>

    </main>
    <footer>
        <div class="signup">我要报名</div>
    </footer>
</body>
<script type="text/template" id="jobinfo">
    {{~it.items:value:index}}
    <div class="job" data-id="{{=value.id}}">
        <div class="jobName">{{=value.jobname}}</div>
        <div class="salary">
            <span>{{=value.salary}}</span>
            <span>{{=value.cyclelength}}</span>
        </div>
        <div class="address">
            <div>
                <img class="address-icon" src="../image/icon/location.png" alt="">
                <span>地址：{{=value.addressinfo}}</span>
            </div>
            <img src="../image/icon/right.png" alt="" onclick="getMap({{=value.lon}},{{=value.lat}})">
        </div>
        <div class="jobinfo">
            <div class="jobinfo-title">职位详情</div>
            <div class="jobinfo-content">{{=value.jobdetails}}</div>
            <div class="contact">
                <img src="../image/icon/contact.png" alt="">
                <span id="type">{{=value.contacttype}}：</span>
                <span id="number">{{=value.contactnumber}}</span>
                {{? value.iscontact == 0}}
                <span onclick="copyContact()">复制</span>
                {{?? value.iscontact == 1}}
                <span style="visibility:visible" onclick="copyContact()">复制</span>
                {{?}}
            </div>
        </div>
    </div>
    <div class="warning">
        <img src="../image/icon/warn.png" alt="">
        <p>未标明收费的职位不会收取任何费用，请提高警惕任何要求您缴纳费用的职位。</p>
    </div>
    {{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.min.js"></script>
<script src="../script/doT.min.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function() {
        getJobDetails();
    };

    function getJobDetails() {
        api.ajax({
            url: 'http://122.112.138.133/wangt/jianzhi/queryJobDetails.com',
            method: 'post',
            data: {
                body: {
                    'tbname': 'jobinfo',
                    'id': api.pageParam.id
                }
            }
        }, function(ret, err) {
            if (ret) {
                var info = [ret.data];
                if ($api.getStorage('userid')) {
                    $('main').append(parttime_render('jobinfo', info));
                    api.ajax({
                        url: 'http://122.112.138.133/wangt/jianzhi/queryCollect.com',
                        method: 'post',
                        data: {
                            body: {
                                "data": {
                                    'userid': $api.getStorage('userid'),
                                    'jobid': api.pageParam.id
                                }
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.data.total == 0) {
                                $('#collect').addClass('uncollect');
                            } else {
                                $('#collect').attr('src', '../image/icon/collect1.png');
                            }
                        }
                    });

                    api.ajax({
                        url: 'http://122.112.138.133/wangt/jianzhi/querySignUp.com',
                        method: 'post',
                        data: {
                            body: {
                                "data": {
                                    "userid": $api.getStorage('userid'),
                                    "jobid": api.pageParam.id
                                }
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.data.total == 0) {
                                $('.signup').addClass('unsignup');
                            } else {
                                $('.signup').text('已报名');
                            }
                        }
                    });

                } else {
                    $('main').append(parttime_render('jobinfo', info));
                }
            }
        });
    }

    $('#collect').click(function() {
        var uname = $api.getStorage('username');
        var userid = $api.getStorage('userid');
        if (uname) {
            if ($(this).hasClass('uncollect')) {
                $(this).attr('src', "../image/icon/collect1.png");
                api.ajax({
                    url: 'http://122.112.138.133/wangt/jianzhi/collectJob.com',
                    method: 'post',
                    data: {
                        body: {
                            'tbname': 'collect',
                            'jobid': api.pageParam.id,
                            'userid': $api.getStorage('userid'),
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        $('#collect').removeClass('uncollect');
                        api.toast({
                            msg: '收藏职位成功',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                });
            } else {
                $(this).attr('src', "../image/icon/collect.png");
                api.ajax({
                    url: 'http://122.112.138.133/wangt/jianzhi/cancelCollect.com',
                    method: 'post',
                    data: {
                        body: {
                            'tbname': 'collect',
                            'jobid': api.pageParam.id,
                            'userid': userid
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        $('#collect').addClass('uncollect');
                        api.toast({
                            msg: '取消收藏成功',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                });
            }
        } else {
            api.toast({
                msg: '请先登录再进行操作',
                duration: 2000,
                location: 'bottom'
            });
            setTimeout(function() {
              api.openWin({
                  name: 'login',
                  url: './login.html',
                  slidBackEnabled: false
              });
            },1000)
        }
    })



    $('.signup').click(function() {
        var uname = $api.getStorage('username');
        var userid = $api.getStorage('userid');
        if (uname) {
            if ($(this).hasClass('unsignup')) {
                $('.signup').text('已报名');
                api.ajax({
                    url: 'http://122.112.138.133/wangt/jianzhi/signup.com',
                    method: 'post',
                    data: {
                        body: {
                            'tbname': 'signup',
                            'jobid': api.pageParam.id,
                            'userid': userid,
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        $('.signup').removeClass('unsignup');
                        api.toast({
                            msg: '报名成功',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                });
            } else {
                api.toast({
                    msg: '已报名，不能重复报名',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        } else {
            api.toast({
                msg: '请先登录再进行操作',
                duration: 2000,
                location: 'bottom'
            });
            setTimeout(function() {
              api.openWin({
                  name: 'login',
                  url: './login.html',
                  slidBackEnabled: false
              });
            },1000)
        }
    })

    function getMap(lon, lat) {
        api.openWin({
            name: 'map',
            url: './map.html',
            pageParam: {
                lon: lon,
                lat: lat
            }
        });
    }

    function copyContact() {
        var num = $('#number').text();
        var dialogBox = api.require('dialogBox');
        dialogBox.alert({
            texts: {
                content: '复制联系方式',
                leftBtnTitle: '取消',
                rightBtnTitle: '确认'
            },
            styles: {
                bg: '#fff',
                w: 300,
                title: {
                    marginT: 20,
                    icon: '../image/icon/kefu.png',
                    iconSize: 40,
                    titleSize: 14,
                    titleColor: '#000'
                },
                content: {
                    color: '#555',
                    size: 14
                },
                left: {
                    marginB: 7,
                    marginL: 20,
                    w: 130,
                    h: 35,
                    corner: 2,
                    bg: '#FBB40E',
                    size: 12
                },
                right: {
                    marginB: 7,
                    marginL: 10,
                    w: 130,
                    h: 35,
                    corner: 2,
                    bg: '#FBB40E',
                    size: 12
                }
            }
        }, function(ret) {
            if (ret.eventType == 'left') {
                dialogBox.close({
                    dialogName: 'alert'
                });
            } else {
                var clipBoard = api.require('clipBoard');
                clipBoard.set({
                    value: num
                }, function(ret, err) {
                    if (ret) {
                        api.toast({
                            msg: '已复制到剪贴板',
                            duration: 2000,
                            location: 'bottom'
                        });
                        dialogBox.close({
                            dialogName: 'alert'
                        });
                    } else {}
                });
            }
        });
    }

    function parttime_render(id, elements, options) {
        var options = options || {};
        var elementObj = doT.template($api.byId(id).innerHTML);
        var elementData = $.extend({
            items: elements
        }, options);
        return elementObj(elementData);
    }
</script>

</html>
